<template>
    <div class="slider" @mouseover="clearInv" @mouseout="_runInv" :style="style">
        <transition-group tag="ul" class="slider-wrapper" :name="mode">
            <li
                v-for="(item,index) in sliders.data"
                :key="item.id"
                class="slider-item"
                
            >
                <a :href="item.url" v-show="index === nowIndex" :target="sliders.target">
                    <img :src="item.src" alt />
                </a>
            </li>
        </transition-group>
        <div class="dots">
            <span
                class="dot"
                v-for="(item, index) in sliders.data.length"
                :key="'dot'+index"
                :class="{active: nowIndex === index }"
                @click="goto(index)"
            ></span>
        </div>
    </div>
</template>
<script>
export default {
    name: "slider",
    data() {
        return {
            sliders: {
                data: [
                    {
                        src:
                            "https://sxsimg.xiaoyuanzhao.com/D6/5A/D685908B685DA7068A50BB6A61EDB45A.png",
                        url: "https://www.shixiseng.com/mx2018",
                        id:'1'
                    },
                    {
                        src:
                            "https://sxsimg.xiaoyuanzhao.com/27/B5/27C9EDE4770EF9F1A78A9E10D7F9D2B5.png",
                        url: "https://www.shixiseng.com/tc/short",
                        id:'2'
                    },
                    {
                        src:
                            "https://sxsimg.xiaoyuanzhao.com/76/2B/765B7A996EBE2FBFEFF3733CDEED7A2B.jpg",
                        url: "https://www.shixiseng.com/tc/rocket",
                        id:'3'
                    },
                    {
                        src:
                            "https://sxsimg.xiaoyuanzhao.com/F4/9E/F4FBC65B27DEB9790539956CF468409E.png",
                        url: "https://wj.qq.com/s/1848680/dc3e",
                        id:'4'
                    }
                ],
                interval: 3000,
                target: "_blank",
                width: "900px",
                height: "500px",
                name: "move"
            },
            nowIndex: 0
        };
    },
    computed: {
        style() {
            return (
                "width:" +
                (this.sliders.width || "800px") +
                ";height:" +
                (this.sliders.height || "400px")
            );
        },
        mode() {
            return this.sliders.name || "move";
        },
        prevIndex() {
            if (this.nowIndex === 0) {
                return this.sliders.data.length - 1;
            } else {
                return this.nowIndex - 1;
            }
        },
        nextIndex() {
            if (this.nowIndex === this.sliders.data.length - 1) {
                return 0;
            } else {
                return this.nowIndex + 1;
            }
        }
    },
    methods: {
        goto(index) {
            this.nowIndex = index;
        },
        _runInv() {
            this.inv = setInterval(() => {
                this.goto(this.nextIndex);
            }, this.sliders.interval || 3000);
        },
        clearInv() {
            clearInterval(this.inv);
        }
    },
    mounted() {
        this._runInv();
        console.log(this)
    }
};
</script>
<style lang="less" scoped>
.slider {
    position: relative;
    overflow: hidden;
    margin: 20px auto;
    padding: 0;
    width: 800px;
}

.slider-wrapper {
    width: 100%;
    height: 100%;
    list-style: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slider-item {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

img {
    width: 100%;
    height: 100%;
    &.move-enter-active {
        transition: all 0.5s ease;
        transform: translateX(0);
    }

    &.move-leave-active {
        transition: all 0.5s ease;
        transform: translateX(-100%);
    }

    &.move-enter {
        transform: translateX(100%);
    }

    &.move-leave {
        transform: translateX(0);
    }

    &.fade-enter-active,
    .fade-leave-active {
        transition: opacity 1s;
    }

    &.fade-enter,
    .fade-leave-active {
        opacity: 0.5;
    }
}

.dots {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 20px;
    text-align: center;
    font-size: 0;
}

.dot {
    display: inline-block;
    margin: 0 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transition: .5s all ;

    &.active {
        width: 20px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.9);
    }
}
</style>